<template>
  <div>
    <!-- 文本输入框 -->
    <div class="operate-text">
      <div id="ckeditor">
        <ckeditor ref="editorRef" v-model="editorDesign" :editor="editor" :config="editorConfig" :disabled="disabled"
          @ready="onEditorReady" @focus="onEditorFocus" @blur="onEditorBlur" @input="onEditorInput"
          @destroy="onEditorDestroy"></ckeditor>
      </div>
    </div>
    <!-- 发送按钮 -->
    <div style="text-align: right">
      <el-button size="small" @click="send">发送</el-button>
    </div>
  </div>
</template>

<script setup>
import { ref, reactive } from "vue";
import { useWebsocket } from "../../../apis/websockeet";
import { useRoute, useRouter } from "vue-router";

import ClassicEditor from "@ckeditor/ckeditor5-build-classic";
import "@ckeditor/ckeditor5-build-classic/build/translations/zh-cn.js";

const route = useRoute();


const state = reactive({
  msg: '',
  msglist: [],
});

const user = reactive({
  username: route.query.username

});

const ws = useWebsocket(handleMessage, user.username);
const props = defineProps({
  disabled: {
    type: Boolean,
    default: false, //是否禁用
  },
});
const editor = ClassicEditor;
const editorDesign = ref(""); //默认内容
const editorConfig = reactive({
  language: "zh-cn",
  // plugins:[],
  toolbar: {
    items: [
      "imageUpload",
    ],
  },
  language: "zh",
  image: {
    toolbar: [
      "imageTextAlternative",
      "toggleImageCaption",
      "imageStyle:inline",
      "imageStyle:block",
      "imageStyle:side",
    ],
  },
  table: {
    contentToolbar: ["tableColumn", "tableRow", "mergeTableCells"],
  },
  ckfinder: {
    uploadUrl: `/api/economic/add`, // 上传图片接口
    options: {
      resourceType: "Images",
    },
    on: {
      fileUploadResponse: (eventInfo) => {
        // 在这里获取上传后的图片 URL
        if (eventInfo.response.default && eventInfo.response.default.url) {
          const imageUrl = eventInfo.response.default.url;
          console.log("上传成功，图片URL：", imageUrl);
          // 可以将 imageUrl 存储到你的数据中，如 editorDesign
          editorDesign.value += `<img src="${imageUrl}" alt="Uploaded Image" />`;
        } else {
          console.log("上传失败");
        }
      },
    },
  },

});

const emit = defineEmits(["ready", "focus", "blur", "input", "destroy"]);
const editorRef = ref(null);

const onEditorReady = () => {
  console.log("准备好了");
  emit("ready");
};

const onEditorFocus = () => {
  console.log("聚焦");
  emit("focus");
};
const onEditorBlur = () => {
  console.log("失去焦点");
  emit("blur");
};

const onEditorInput = () => {
  emit("input");
};

const onEditorDestroy = () => {
  console.log("销毁");
  emit("destroy");
};

const send = () => {

  console.log(editorDesign.value);
  alert(editorDesign.value);

  const _msg = editorDesign.value;

  if (!_msg.trim().length) {
    return;

  }

  ws.send(JSON.stringify({
    id: new Date().getTime(),
    username: user.username,
    dateTime: new Date().getTime(),
    msg: editorDesign,

  }))

  editorDesign.value = '';


};

function handleMessage(e) {

  const _msgData = JSON.parse(e.data);
  state.msglist.push(_msgData);
  console.log(_msgData);
  console.log(state.msglist);

}
</script>



<style scoped>
.operate-text {
  overflow: hidden;
}

:deep(.el-textarea__inner) {
  border: none;
  outline: none;
}

.operate-header {
  display: flex;
  align-items: center;
  justify-content: left;
  padding: 4px;
}

.icon {
  width: 10em;
  height: 10em;
  margin-right: 1px;
}
</style>
